<template>
  <div class="article-list">
    <Loading :loading="loading">
      <ArticleCard class="article-card" :article="article" v-for="article in articles" />
    </Loading>
  </div>

</template>

<script setup>
import ArticleCard from "./ArticleCard.vue";
import Loading from "../../commons/Loading.vue";
// 父子传值

defineProps({
  loading: {
    type: Boolean,
    required: true,
    default: true
  },
  articles: {
    type: Array,
    required: true,
    default: []
  }
})
</script>

<style scoped>
.article-spin {
  width: 800px;
  margin: 40px 0;
}

.article-list {
  display: flex;
  justify-content: center;
  width: 800px;
  margin-left: 20px;
}

.article-card {
  width: 800px;
  margin: 20px 0;
}

.article-card:first-child {
  margin-top: 10px;
}
</style>